<template>
  <div class="ly-wrap">
    <div class="sub-title">当前小区：{{name}}</div>
    <form v-model="info">
      <yd-cell-group title="故障地址">
        <yd-cell-item>
          <yd-textarea slot="right" v-model="info.address" placeholder="请输入故障地址" maxlength="100"></yd-textarea>
        </yd-cell-item>
      </yd-cell-group>
      <yd-cell-group title="故障原因/描述">
        <yd-cell-item>
          <yd-textarea slot="right" v-model="info.content" placeholder="请输入故障原因/描述" maxlength="100"></yd-textarea>
        </yd-cell-item>
      </yd-cell-group>
      <yd-cell-group title="联系人电话">
        <yd-cell-item>
          <yd-input slot="right" v-model="info.number" placeholder="请输入联系人电话"></yd-input>
        </yd-cell-item>
      </yd-cell-group>
      <yd-cell-group title="上传图片"></yd-cell-group>
      <div class="ly-photo" slot="else">
        <div class="pt-wrap">
          <div class="pt-item" v-for="img in imgbox">
            <img :src="img" alt="图片" :preview="preview">
            <!--<div class="imgbox" :style="{backgroundImage: 'url(' + img+ ')'}"></div>-->
          </div>
          <div class="up-wrap" v-if="imgbox.length<3">
            <div class="up-input" @click="inputClick"></div>
            <div class="loading" v-show="loading">图片上传中...</div>
          </div>
          <div class="clear"></div>
          <input ref="file" type="file" style="display: none" accept="image/*" capture="camera"
                 @change="inputOnChange"/>
        </div>
      </div>
    </form>
    <yd-button style="width: 88%;margin: 0.3rem auto;" size="large" type="primary" @click.native="upRepairInfo()">
      提交
    </yd-button>
  </div>
</template>

<script>
  import http from "../../http";
  import storage from "../../store/storage.js";

  export default {

    data() {
      return {
        preview: 0,
        name: "",
        housingId: '',
        info: {
          address: '',
          content: '',
          number: '',
        },
        imgbox: [],
        repairList: [],
        picUrls: [],
        loading: false,

      };
    },
    created: function () {
      this.init();
    },
    methods: {

      init: function () {

        http.get("/communityApps/personalCenter/userInfo").then(res => {
          this.name = storage.getObj("housingId").name;
          this.housingId = storage.getObj("housingId").id;
        });

      },

      inputClick: function () {
        this.$refs.file.click();
      },
      inputOnChange: function () {
        // console.log(this.$refs.file.files[0]);
        if (this.$refs.file.files[0]) {
          if (this.imgbox.length >= 3) {
            this.$dialog.toast({
              mes: "超出最大限制",
              timeout: 1500
            });
          } else {
            this.loading = true;
            const image = new FormData();
            image.append('file', this.$refs.file.files[0]);
            image.append("fileName", "repair-img/");
            http.postFile("/communityApps/upload/uploadImg", image).then(res => {
              console.log(res);
              this.imgbox.push(res.data);
              this.$previewRefresh();
              this.loading = false;
            });
          }
        }
      },
      upRepairInfo: function () {

        this.info.picUrl = this.imgbox;

        if (this.loading) {
          this.$dialog.toast({
            mes: "请等待图片上传完",
            timeout: 2000
          });
        } else if (this.info.address == '') {
          this.$dialog.toast({
            mes: "请输入故障地址",
            timeout: 2000
          });
        } else if (this.info.content == '') {
          this.$dialog.toast({
            mes: "请输入故障原因",
            timeout: 2000
          });
        } else if (this.info.number == '') {
          this.$dialog.toast({
            mes: "请输入联系电话",
            timeout: 2000
          });
        } else {
          const parmas = {
            typeInt: 1,
            housingId: this.housingId,
            picUrl: this.imgbox,
            address: this.info.address,
            content: this.info.content,
            telphone: this.info.number,
          };
          console.log(parmas);
          http.post("/communityApps/reportms/addReportms", parmas).then(res => {
            if (res.data.code == 20000) {
              this.$dialog.toast({
                mes: "提交成功！",
                timeout: 2000,
                callback: () => {
                  this.$router.push({path: '/'})
                }
              });

            } else {
              this.$dialog.toast({
                mes: res.data.message,
                timeout: 2000
              });
            }
          });
        }
      },


    }
  }
  ;
</script>


<style scoped lang="scss">


  .sub-title {
    color: #666;
    font-size: .28rem;
    line-height: 0.4rem;
    padding: .2rem .24rem .1rem;
  }

  .clear {
    clear: both;
  }

  .ly-photo {
    width: 100%;
    height: auto;
    background: #fff;

    .pt-wrap {
      padding: 0.36rem;
      padding-right: 0;
      padding-top: 0;
    }
    .up-wrap {
      width: 2rem;
      height: 2rem;
      display: block;
      font-size: 0;
      float: left;
      margin-right: 0.38rem;
      margin-top: 0.3rem;
      position: relative;
      .up-input {
        width: 2rem;
        height: 2rem;
        display: block;
        position: absolute;
        border: 1px dashed #ccc;
        background: url(../../assets/add.png) no-repeat center;
        -webkit-background-size: 0.4rem;
        background-size: 0.4rem;
      }
      .loading {
        width: 2rem;
        height: 2rem;
        display: block;
        background: #ccc url(../../assets/loading.png) no-repeat center;
        -webkit-background-size: 0.4rem;
        background-size: 0.4rem;
        position: absolute;
        font-size: 10px;
        color: #000;
        text-align: center;
        line-height: 3rem;
        border: 1px solid #ccc;
      }
    }

    .pt-item {
      width: 2rem;
      height: 2rem;
      border: 1px solid #ddd;
      float: left;
      margin-right: 0.38rem;
      margin-top: 0.3rem;
      text-align: center;
      .imgbox {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        text-align: center;
      }
      img {
        max-width: 100%;
        max-height: 100%;
      }

    }
  }

  .img-item {
    width: 2rem;
    height: 2rem;
    float: left;
    overflow: hidden;
    margin-right: 2px;
    .bg-img {
      width: 2rem;
      height: 2rem;
      background-repeat: no-repeat;
    }
  }

</style>
